<template>
<!--面包屑-->
<div style="margin-bottom: 30px">
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/Main' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>
      <router-link to="/Materials/ShowMaterial">物资采购</router-link>
    </el-breadcrumb-item>
    <el-breadcrumb-item>物资列表</el-breadcrumb-item>
  </el-breadcrumb>
</div>


<!--查询条件-->
<div style="margin-bottom: 30px;">
  物资名称：<el-input v-model="form.nameOfGoods" placeholder="请输入货物名称" style="width: 240px;"></el-input>&nbsp;&nbsp;
  材质：<el-input v-model="form.material" placeholder="请输入材质" style="width: 240px;"></el-input>&nbsp;&nbsp;
  产地<el-select v-model="form.CountryId" placeholder="请选择国家" size="large" style="width: 240px" @change="getEconomizeList">
      <el-option v-for="item in countryData" :key="item.countryId" :label="item.countryName" :value="item.countryId"/>
    </el-select>
        
        &nbsp;&nbsp;
        <el-select v-model="form.EconomizeId" placeholder="请选择省/州" size="large" style="width: 240px">
      <el-option v-for="item in EconomizeData" :key="item.economizeId" :label="item.economizeName" :value="item.economizeId"/>
    </el-select>
  <br/>
  <br/>
  申请人：<el-input v-model="form.applicant" placeholder="请输入申请人" style="width: 240px;"></el-input>&nbsp;&nbsp;
  审批状态：
  <el-select v-model="form.approvalStatus" placeholder="请选择" style="width: 240px;">
    <el-option label="全部" value="" />
    <el-option v-for="item in ApprovalStatusData" :key="item.enumId" :label="item.enumName" :value="item.enumId" />
  </el-select> &nbsp;&nbsp; &nbsp;&nbsp; 

  <el-button type="primary" @click="getMaterialsList">查询</el-button>
  <el-button @click="reset">重置</el-button>
  <br/>
  <br/>
  <!-- v-show="form.buttonArray.includes('add')" -->
  <el-button type="primary"  @click="router.push('AddMaterial')">新增</el-button>&nbsp;&nbsp;
  <el-button type="primary" @click="deletedRange">批量删除</el-button>
</div>

<!--物资列表-->
<div>
  <el-table :data="MaterialsData" border style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column type="selection" />
    <el-table-column prop="nameOfGoods" label="货物名称" align="center" />
    <el-table-column prop="materialStoreType" label="类型" align="center" width="90px" />
    <el-table-column prop="material" label="材质" align="center" />
    <el-table-column prop="specifications" label="规格" align="center" />
    <el-table-column label="产地" align="center" width="180px" >
      <template v-slot="scope">
        {{ scope.row.countryName }} -- {{scope.row.economizeName}}
      </template>
    </el-table-column>
    <el-table-column prop="number" label="数量" align="center" />
    <el-table-column prop="usageDescription" label="用途描述" align="center" width="140px" />
    <el-table-column prop="applicant" label="申请人" align="center" />
    <el-table-column prop="deliveryDate" label="期望交付日期" align="center" >
      <template v-slot="scope">
        {{ scope.row.deliveryDate.substr(0,10) }}
      </template>
    </el-table-column>
    <el-table-column prop="notes" label="备注" align="center" />
    <el-table-column prop="createdDate" label="创建时间" align="center" width="135px" >
      <template v-slot="scope">
        {{ scope.row.createdDate.substr(0,16).replace("T"," ") }}
      </template>
    </el-table-column>
    <el-table-column prop="approvalStatus" label="审批状态" align="center" >
      <template v-slot="scope">
        <el-tag type="primary" v-if="scope.row.approvalStatus==10">待提交</el-tag>
        <el-tag type="warning" v-if="scope.row.approvalStatus==20">待审批</el-tag>
        <el-tag type="success" v-if="scope.row.approvalStatus==30">已通过</el-tag>
        <el-tag type="danger"  v-if="scope.row.approvalStatus==40">已拒绝</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="approver" label="审批人" align="center" />
    <el-table-column label="操作" align="center" width="202px" >
      <template v-slot="scope">
        <el-link type="primary" target="_blank" v-if="scope.row.approvalStatus==10" @click="router.push('ReverseMaterial?materialStoreId='+scope.row.materialStoreId)" >编辑</el-link>&nbsp;&nbsp;
        <el-link type="primary" target="_blank" v-else-if="scope.row.approvalStatus==40" @click="router.push('ReverseMaterial?materialStoreId='+scope.row.materialStoreId)" >编辑</el-link>&nbsp;&nbsp;
        <span v-else></span>&nbsp;&nbsp;
        <el-link type="primary" target="_blank" @click="del(scope.row.materialStoreId)" >删除</el-link>&nbsp;&nbsp;
        <el-link type="primary" target="_blank" @click="checkInfo(scope.row.materialStoreId)">查看</el-link>&nbsp;
        <el-link type="primary" target="_blank" v-if="scope.row.approvalStatus==10"      @click="UpdateStatus(scope.row.materialStoreId,10)">提交审批</el-link>&nbsp;
        <el-link type="primary" target="_blank" v-else-if="scope.row.approvalStatus==40" @click="UpdateStatus(scope.row.materialStoreId,40)">重新提交</el-link>&nbsp;
        <span v-else></span>
      </template>
    </el-table-column>
  </el-table>
</div>

<!--分页-->
<div>
  <table>
  <thead></thead>
  <tbody>
    <tr>
      <td>
        <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize" :page-sizes="[15, 20, 25, 30]" :background="true" layout="total,slot, sizes" :total="form.totalCount" prev-text="上一页" next-text="下一页" @size-change="handleSizeChange" @current-change="handleCurrentChange">
          <span>
            ，每页{{ form.pageSize }}条，当前第:{{ form.pageIndex }}/{{ form.pageCount }}页
          </span>
        </el-pagination>
      </td>

      <td>
        <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize" :page-sizes="[15, 20, 25, 30]" :background="true" layout="slot, prev, pager, next" :total="form.totalCount" prev-text="上一页" next-text="下一页" @size-change="handleSizeChange" @current-change="handleCurrentChange">
          <el-button type="primary" class="btn-prev" @click="handleCurrentChange(1)" :disabled="form.pageIndex==1">首页</el-button>
        </el-pagination>
      </td>

      <td>
        <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize" :page-sizes="[15, 20, 25, 30]" :background="true" layout="slot, jumper" :total="form.totalCount" prev-text="上一页" next-text="下一页" @size-change="handleSizeChange" @current-change="handleCurrentChange">
          <el-button type="primary" class="btn-prev" @click="handleCurrentChange(form.pageCount)" :disabled="form.pageIndex==form.pageCount">尾页</el-button>
        </el-pagination>
      </td>
    </tr>
  </tbody>
</table>
</div>

<!--查看物资对话框-->
<div>
  <el-dialog v-model="dialogFormVisible" title="物资详情" width="500">
    <el-form ref="ruleFormRef" style="max-width: 600px;margin:auto" :model="form" label-width="auto" class="demo-ruleForm" :size="formSize" status-icon>
  
  <el-form-item label="货物名称" prop="nameOfGoods">
    <el-input v-model="form.nameOfGoods" disabled />
  </el-form-item>

  <el-form-item label="类型" prop="materialStoreType">
    <el-select v-model="form.materialStoreType" disabled >
      <el-option label="车辆用品" value="车辆用品" />
      <el-option label="办公用品" value="办公用品" />
    </el-select>
  </el-form-item>

  <el-form-item label="材质" prop="material">
    <el-select v-model="form.material" disabled >
      <el-option label="金属" value="金属" />
      <el-option label="橡胶" value="橡胶" />
      <el-option label="塑料" value="塑料" />
      <el-option label="液体" value="液体" />
      <el-option label="纸质" value="纸质" />
    </el-select>
  </el-form-item>

  <el-form-item label="规格" prop="specifications">
    <el-input v-model="form.specifications" disabled  />
  </el-form-item>

  <el-form-item label="产地" prop=" ">
        <el-select v-model="form.CountryId" placeholder="请选择国家" size="large" style="width: 240px" @change="getEconomizeList" disabled > 
      <el-option v-for="item in countryData" :key="item.countryId" :label="item.countryName" :value="item.countryId"/>
    </el-select>
        
        &nbsp;&nbsp;
        <el-select v-model="form.EconomizeId" placeholder="请选择省/州" size="large" style="width: 240px" disabled >
      <el-option v-for="item in EconomizeData" :key="item.economizeId" :label="item.economizeName" :value="item.economizeId"/>
    </el-select>
      </el-form-item>

  <el-form-item label="数量" prop="number">
    <el-input-number v-model="form.number" :min="1" disabled   />
  </el-form-item>

  <el-form-item label="期望交付日期" prop="deliveryDate">
    <el-date-picker v-model="form.deliveryDate" type="date" value-format="YYYY-MM-DD" disabled/>
  </el-form-item>

  <el-form-item label="用途描述" prop="usageDescription">
    <el-input v-model="form.usageDescription" :rows="3" type="textarea" disabled  />
  </el-form-item>

  <el-form-item label="备注" prop="notes">
    <el-input v-model="form.notes" :rows="3" type="textarea" disabled  />
  </el-form-item>
</el-form>
  </el-dialog>
</div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, computed } from 'vue'
import axios from 'axios';
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'

import {useRoute,useRouter} from 'vue-router'

const route = useRoute();
const router = useRouter();
const dialogFormVisible:any = ref(false)
const formLabelWidth = '140px'
const formSize = ref<ComponentSize>('default')

onMounted(() => {
  //物资列表
  getMaterialsList()

  //审批枚举状态
  getApprovalStatus()

  getCountryList()
  getEconomizeList()

  getRoleMenuFun()
})

const form: any = reactive({
  nameOfGoods: '',
  material: '',
    CountryId: '',
    EconomizeId: '',
  applicant: '',
  approvalStatus: '',
  paymentMethod:'',
  pageIndex: 1,
  pageSize: 15,
  pageCount: 0,
  totalCount: 0,
  buttonArray: [],
})

    //获取国家列表
    const countryData: any = ref([]);
  const getCountryList = () => {
    axios.get('/mread/api/ShowMaterialStore/GetCountryList', {
      params: {
        
      }
    }).then(res=>{
    //console.log(res);
      countryData.value = res.data.data;
  }).catch(err=>{
    console.log(err);
    
  })    
  }

    //获取省/州列表
    const EconomizeData: any = ref([]);
  const getEconomizeList = () => {
     form.EconomizeId = "";
    axios.get('/mread/api/ShowMaterialStore/GetEconomizeList', {
      params: {
        CountryId: form.CountryId || 0
      }
    }).then(res=>{
    //console.log(res);
    
    EconomizeData.value = res.data.data;
  }).catch(err=>{
    console.log(err);
    
  })    
  }

//存储多选中的物资id
const multipleSelection:any = ref([]);
const handleSelectionChange = (val:any) => {
  multipleSelection.value = val;
  console.log(multipleSelection.value);
  
}

//获取审批状态枚举反射
const ApprovalStatusData:any=ref([])
const getApprovalStatus=()=>{
  axios.get('/mread/api/ShowMaterialStore/GetApprovalStatusEnum').then(res=>{
    //console.log(res);
    ApprovalStatusData.value = res.data;
  }).catch(err=>{
    console.log(err);
    
  })    
}

//根据菜单id查询按钮功能权限
const getRoleMenuFun=()=>{
  axios.get('http://47.96.109.219:5202/api/RoleMenuFun/RoleMenuFunId', {
    params: {
      menuId:route.query.id
    }
  }).then(res=>{
    console.log(res);
    form.buttonArray=res.data.data
  }).catch(err=>{
    console.log(err);
    
  })    
}


//分页
const handleSizeChange = (val: number) => {
  form.pageSize = val;
  getMaterialsList()
}
const handleCurrentChange = (val: number) => {
  form.pageIndex = val;
  getMaterialsList()
}

//物资列表
const MaterialsData:any=ref([])
const getMaterialsList = () => {

  axios.get('/mread/api/ShowMaterialStore/GetMaterialStoreList', {
    params: {
      NameOfGoods: form.nameOfGoods,
      Material: form.material,
      CountryId: form.CountryId,
      EconomizeId: form.EconomizeId,
      Applicant: form.applicant,
      ApprovalStatus: form.approvalStatus,
      PaymentMethod: form.paymentMethod,
      pageIndex: form.pageIndex,
      pageSize: form.pageSize,
    }
  }).then(res=>{
    console.log(res);
    MaterialsData.value = res.data.data.list;
    form.pageCount = res.data.data.pageCount;
    form.totalCount = res.data.data.totalCount;
  }).catch(err=>{
    console.log(err);
    
  })    
}

//重置
const reset = () => {
  form.nameOfGoods = '',
  form.material = '',
  form.CountryId='',
  form.EconomizeId= '',
  form.applicant = '',
  form.approvalStatus = '',
  form.pageIndex = 1,
  form.pageSize = 15,
  getMaterialsList()
}


//查看详情
const checkInfo = (materialStoreId:number) => {
  dialogFormVisible.value = true;

  //反填
  getReverseMaterialStore(materialStoreId)
}

//反填
const getReverseMaterialStore=(materialStoreId:number)=>{
  axios.get('/mread/api/ShowMaterialStore/ReverseMaterialStore?materialStoreId='+materialStoreId).then(res=>{
    //console.log(res);
    let Data = res.data.data;
    form.companyID = Data.companyID;
    form.user_Id = Data.user_Id;
    form.nameOfGoods = Data.nameOfGoods;
    form.materialStoreType = Data.materialStoreType;
    form.material = Data.material;
    form.specifications = Data.specifications;
    getCountryList()
    form.CountryId = Data.countryId,
      getEconomizeList()
    form.EconomizeId = Data.economizeId,
   
    form.city = Data.city;
    form.county = Data.county;
    form.number = Data.number;
    form.deliveryDate = Data.deliveryDate;
    form.usageDescription = Data.usageDescription;
    form.applicant = Data.applicant;
    form.approvalStatus = Data.approvalStatus;
    form.approver = Data.approver;
    form.registrant = Data.registrant;
    form.paymentMethod = Data.paymentMethod;
    form.unitPrice = Data.unitPrice;
    form.notes = Data.notes;
    form.materialClassificat = Data.materialClassificat;  
    form.createdBy = Data.createdBy;
    form.createdDate = Data.createdDate;
    form.updatedBy = Data.updatedBy;
    form.updatedDate = Data.updatedDate;
    form.deletedBy = Data.deletedBy;
    form.deletedDate = Data.deletedDate;
    form.isDeleted = Data.isDeleted;
  }).catch(err=>{
    console.log(err);
    
  })    
}

//单删
const del = (materialStoreId: number) => {
  ElMessageBox.confirm(
    '确认删除该物资采购申请吗?',
    '确认删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
    }
  )
    .then(() => {
      axios.post('/mwrite/api/MaterialStore/DeletedMaterialStore', {
        MaterialStoreId: materialStoreId,
      }).then(res => {
        console.log(res);
        if (res.data.code >= 0) {
          ElMessage.success("删除成功!")
          //刷新页面
          getMaterialsList()
        } else {
          ElMessage.error("删除失败!")
          return
        }
      }).catch(err => {
        console.log(err);

      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作',
      })
    })
}

//批量删除
const deletedRange = () => {
  let ids = multipleSelection.value.map((x: any) => x.materialStoreId);
  if (ids.length == 0) {
    ElMessage.error("请至少选择一条要删除的物资采购申请!")
    return
  }

  ElMessageBox.confirm(
    '确认删除这些物资采购申请吗?',
    '确认删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
    }
  )
    .then(() => {
      console.log(ids);
      
      axios.post('/mwrite/api/MaterialStore/BatchDeleteeMaterialStore', {
        materialStoreId: ids,
      }).then(res => {
        console.log(res);
        if (res.data.code > 0) {
          ElMessage.success("删除成功!")
          //刷新页面
          getMaterialsList()
        } else {
          ElMessage.error("删除失败!")
          return
        }
      }).catch(err => {
        console.log(err);

      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作',
      })
    })
}

//修改状态
const UpdateStatus = (materialStoreId: number, approvalStatus: number) => {
  let updateStatus: any = {
    materialStoreId: materialStoreId,
    approvalStatus: approvalStatus
  }
  axios.post('/mwrite/api/MaterialStore/UpdadteApprovalStatus',updateStatus).then(res=>{
    console.log(res);
    if (res.data.code > 0) {
      ElMessage.success("提交成功!")
      //刷新列表
      getMaterialsList()
    } else {
      ElMessage.error(res.data.message)
      return
    }
  }).catch(err=>{
    console.log(err);
    
  })    
}

</script>

<style scoped>

</style>